<template>
  <div class="cms-views-container mail-cms-pages">
    <header class="h-10 px-4 leading-10 text-center">
      <span class="float-left">
        <LeftOutlined class="text-base" />
      </span>
      <span class="text-base text-[#333] font-medium">{{ type === 4 ? '修改手机号' : '绑定邮箱' }}</span>
    </header>
    <div v-if="type !== 4">
      <div class="px-8 mt-4 mb-5">
        <div class="flex items-center h-14 mail-border">
          <label class="text-[#48494d] text-sm" v-if="type === 1">邮箱</label>
          <label class="text-[#48494d] text-sm" v-if="type === 2">原邮箱</label>
          <label class="text-[#48494d] text-sm" v-if="type === 3">新邮箱</label>
          <span class="text-[#c2c2c2]" v-if="type !== 3" :class="type === 1 ? 'pl-11' : 'pl-[30px]'"
            ><span v-if="type === 1" class="text-[#ff613f] relative left-1 bottom-0.5">|</span>
            {{ type === 1 ? '请输入邮箱地址' : '1234@133.com' }}</span
          >
          <span v-else class="text-[#48494d] pl-[30px] text-sm">12345@133.com</span>
        </div>
      </div>
      <div class="px-8">
        <div class="relative flex items-center h-14 mail-border">
          <label class="text-[#48494d] text-sm">验证码</label>
          <span class="pl-[30px] text-[#c2c2c2]" v-if="type !== 3">请输入邮箱验证码</span>
          <span v-else class="text-[#48494d] pl-[30px] text-sm">1234</span>
          <span
            class="absolute right-0 bottom-[18px]"
            v-if="type !== 3"
            :class="type === 1 ? 'text-[#c2c2c2]' : 'text-[#ff613f]'"
            >发送验证码</span
          >
          <span v-else class="absolute right-0 bottom-[18px] text-[#c2c2c2]">60s后获取</span>
        </div>
      </div>
    </div>
    <div v-else class="px-8 mt-4 mb-5">
      <div class="flex items-center h-14 mail-border">
        <label class="text-[#48494d] text-sm">手机号</label>
        <span class="text-[#c2c2c2] pl-[30px]"
          ><span class="text-[#ff613f] relative left-1 bottom-0.5">|</span> 请输入手机号</span
        >
      </div>
    </div>
    <button
      class="mt-5 w-[311px] h-[42px] text-white border-0 rounded mx-8"
      :class="type === 1 || type === 2 || type === 4 ? 'mail-opac-btn' : 'mail-btn'"
    >
      {{ type === 1 || type === 4 ? '确定' : '下一步' }}
    </button>
  </div>
</template>

<script setup lang="ts">
import { withDefaults } from 'vue'

withDefaults(defineProps<{ type: number }>(), { type: 1 })
</script>

<style scoped lang="less">
.mail-cms-pages {
  .mail-border {
    border-bottom: 1px solid #f1f3f7;
  }
  .mail-opac-btn {
    opacity: 0.3;
    background-image: linear-gradient(134deg, #ff983f 0%, #ff613f 100%);
  }
  .mail-btn {
    background-image: linear-gradient(134deg, #ff983f 0%, #ff613f 100%);
  }
}
</style>
